<template>
  <div class="allotT">
    <div class="headerBox">
      <van-nav-bar
        title="T数分配"
        left-arrow
        @click-left="goBack"
      ></van-nav-bar>
    </div>
    <div class="formBox">
      <van-cell title="待分配T数" value="2000T" class="subAllot" />
      <van-field v-model="value" label="自用T数" placeholder="请输入自用T数数量" input-align="right" />
      <p class="txt1">*注：输入自用T数，确认分配后，剩余T数自动转为代售T数</p>
    </div>
    <div class="handlerBox">
      <p class="handlerBtn handlerBtn1" @click="popupShow=true">确认分配</p>
    </div>
    <van-overlay :show="popupShow" @click="popupShow = false">
      <div class="confirmBox">
        <img src="@/assets/img/wallet/img_laba@3x.png" alt="" class="bg">
        <p class="txt2">提示</p>
        <p class="txt3">您是否确认将您购置的T数进行如下分配？</p>
        <div>
          <p class="subText">
            <span class="txt4">自用T数</span>
            <span class="txt5">200T</span>
          </p>
          <p class="subText">
            <span class="txt4">代售T数</span>
            <span class="txt5">200T</span>
          </p>
        </div>
        <div class="flex">
          <p class="handlerBtn handlerBtn2" @click="popupShow=false">取 消</p>
          <p class="handlerBtn handlerBtn3" @click="submit">确 认</p>
        </div>
      </div>
    </van-overlay>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value:'',
      popupShow:false
    }
  },
  created(){

  },
  methods:{
    goBack(){
      this.$router.go(-1)
    },
    submit(){
      this.popupShow=false
    }
  }
};
</script>

<style scoped>
.allotT{
  background: #fff;
  min-height: 100vh;
}
.txt1{
  font-size: 0.24rem;
  color: #F30F0F;
  padding: 0.18rem 0.28rem;
}
.handlerBox{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  border-top: 2px solid #F1F1F1;
}
.handlerBtn{
  height: 0.82rem;
  line-height: 0.82rem;
  border-radius: 0.41rem;
  text-align: center;
  color: #fff;
  font-size:0.34rem;
  margin: 0 auto;
  margin-top: 0.2rem;
  margin-bottom: 0.2rem;
}
.handlerBtn1{
  width: 6.94rem;
  background: #F6741F;
}
.handlerBtn2{
  width: 2.7rem;
  background: #C8CEDA;
}
.handlerBtn3{
  width: 2.7rem;
  background: #F6741F;
}
.confirmBox{
  position: relative;
  width: 6.54rem;
  height: 5.54rem;
  border-radius: 0.12rem;
  background: #fff;
  padding: 0 0.42rem;
  left: 50%;
  top: 50%;
  margin-left: -3.27rem;
  margin-top: -2.77rem;
}
.bg{
  position: absolute;
  left: 1.8rem;
  top: -1.2rem;
  width: 2.16rem;
  height: auto;
}
.txt2{
  text-align: center;
  padding-top: 0.84rem;
  font-size: 0.4rem;
  font-weight: 600;
  margin-bottom: 0.16rem;
}
.txt3{
  font-size: 0.3rem;
  color: #000;
  text-align: center;
  margin-bottom: 0.48rem;
}
.txt4{
  font-size: 0.29rem;
}
.txt5{
  font-size: 0.32rem;
  color: #000;
  font-weight: 600;
}
.subText{
  display: flex;
  justify-content: space-between;
  border-bottom: 1px dashed #C0C0C0 ;
  padding: 0.22rem 0;
}
.subText:last-child{
  border-bottom: none;
}
</style>
<style>
.subAllot .van-cell__value{
  font-size: 0.34rem;
  color: #333;
  font-weight: bold;
}
</style>